<!DOCTYPE html>
<html lang='cn'>
	<head>
		<meta name='viewport' content='width=device-width,initial-scale=1 .0 user-scale' />
		<meta charset='utf-8' />
		<title>像素灯网页配置</title>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			body {
				background: rgb(255, 255, 255) center center;
				background-size: cover;
				position: relative;
			}

			.container {
				position: absolute;
				top: 50%;
				text-align: center;
				width: 100%;
				transform: translateY(-50%);
			}

			h1 {
				line-height: 150px;
				color: royalblue;
				font-size: 50px;
				margin: 0px;
			}

			p {
				line-height: 50px;
				color: royalblue;
				font-size: 22px;
				margin: 5px;
			}

			textarea {
				line-height: 30px;
				width: 300px;
				height: 200px;
				color: royalblue;
				font-size: 22px;
				border-radius: 10px;
				margin: 5px;
			}

			select {
				line-height: 30px;
				width: 190px;
				height: 40px;
				font-size: 20px;
				margin: 10px auto;
				border-radius: 5px;
			}

			.btn {
				width: 150px;
				height: 60px;
				background-color: #7cacae;
				color: #fff;
				font-size: 24px;
				line-height: 60px;
				margin: 10px auto;
				border-radius: 10px;
				transition: 1s;
			}

			.btn:hover {
				background-color: royalblue;
				width: 300px;
				height: 100px;
				line-height: 100px;
				font-size: 36px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<h1>像素屏文本显示</h1><textarea id='text' placeholder='请输入显示内容'></textarea>
			<p>选择字体：<select>
					<option name='font' value='0'>Apple4x6(字符全)</option>
					<option name='font' value='1'>Apple5x7(字符全)</option>
					<option name='font' value='2'>Apple6x10(字符全，偏大)</option>
					<option name='font' value='3'>Pix5x7(0~9 A~Z a~z)</option>
					<option name='font' value='4'>Atari8x8(0~9 A~Z)</option>
					<option name='font' value='5'>Undertale8x8(字符全)</option>
					<option name='font' value='6'>Blodnum8x8(字符全)</option>
					<option name='font' value='7' selected>Cnfont8x8(中英文,含中文必选)</option>
				</select></p>
			<p>颜色模式：<select>
					<option name='color' value='0' selected>纯色</option>
					<option name='color' value='1'>彩虹色</option>
					<option name='color' value='2'>渐变色</option>
					<option name='color' value='3'>调色板</option>
				</select></p>
			<p>显示方式：<select>
					<option name='showmode' value='0' selected>滚动播放</option>
					<option name='showmode' value='1'>快闪模式</option>
				</select><br /><a href='/wordsetting'>高级设置</a></p><input id='btn' class='btn' type='submit' value='确认'
				onclick='clickOk();'>
			<script>
				var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
				connection.onopen = function() {
					connection.send('Connect ' + new Date());
				};
				connection.onerror = function(error) {
					console.log('WebSocket Error ', error);
				};
				connection.onmessage = function(e) {
					console.log('Server: ', e.data);
				};
				var oBtn = document.getElementById('btn');
				var oFont = document.getElementsByName('font');
				var oColor = document.getElementsByName('color');
				var oShowmode = document.getElementsByName('showmode');
				var oText = document.getElementById('text');
				var oMessage;

				function clickOk() {
					for (var i = 0; i < oFont.length; i++) {
						if (oFont[i].selected) {
							oMessage = 'w' + parseInt(oFont[i].value).toString(16);
						}
					}
					for (var i = 0; i < oColor.length; i++) {
						if (oColor[i].selected) {
							oMessage = oMessage + parseInt(oColor[i].value).toString(16);
						}
					}
					for (var i = 0; i < oShowmode.length; i++) {
						if (oShowmode[i].selected) {
							oMessage = oMessage + parseInt(oShowmode[i].value).toString(16);
						}
					}
					oMessage = oMessage + oText.value;
					console.log('oMessage: ' + oMessage);
					connection.send(oMessage);
				}
			</script>
			<form action='/' method='POST'><input class='btn' type='submit' value='返回主页'></form>
		</div>
	</body>
</html>
